<template>
  <div>

    <div class="map-search-bar" @on-enter="search" @on-blur="search">
      <i class="icon icon-search" @click="search"></i>
      <input type="text" v-model="key" placeholder="请输入站点名称">
    </div>

    <div class="filter-btn" @click="showFilter">
      <i class="icon icon-menu"></i>
    </div>

    <div id="allmap"></div>

    <!--站点详情弹窗-->
    <div v-transfer-dom>
      <popup v-model="showDetailPopup" @on-hide="" @on-show="">
        <div class="popup map-detail-popup">
          <group>
            <i class="icon icon-del" @click="hideDetailPopup"></i>
            <div>
              <span class="lng-18-text">{{detail.name}}</span>
              <a :href="'tel:' + detail.phone">
                <i class="icon icon-phone blue-text lng-20-text"></i>
              </a>
              <div class="blue-button" @click.prevent.stop="goMap(detail)">到这去</div>
            </div>
            <div>
              <div class="lng-flex">
                <i class="icon icon-address"></i>
                <div>地址：{{detail.address}}</div>
              </div>
              <div class="lng-flex">
                <i class="icon icon-time"></i>
                <div>建站时间：{{detail.createTime}}</div>
              </div>
              <div class="lng-flex">
                <i class="icon icon-gongsi"></i>
                <div>所属公司：{{detail.stationCompany}}</div>
              </div>
              <div class="lng-flex">
                <i class="icon icon-people"></i>
                <div>站点负责人：{{detail.stationResponsiblePeople}}</div>
              </div>
              <div class="lng-flex">
                <i class="icon icon-phone"></i>
                <div>联系电话：{{detail.phone}}</div>
              </div>
              <div class="lng-flex">
                <i class="icon icon-rongliang"></i>
                <div>建站容量：{{detail.capacity}}m³</div>
              </div>
              <div class="lng-flex">
                <i class="icon icon-state"></i>
                <div>运营状态：{{detail.stationState}}</div>
              </div>
            </div>

          </group>
        </div>
      </popup>
    </div>

    <!--<popup-picker :show.sync="showPopupPicker" :show-cell="false" title="TEST" :data="[['1', '2', '3', '4', '5']]" v-model="selectId"></popup-picker>-->

    <!--搜索结果弹窗-->
    <div v-transfer-dom>
      <popup v-model="showSearchList" @on-hide="" @on-show="">
        <div class="popup search-list-popup">
          <group label-width="12em" title="搜索结果">
            <template v-for="item in searchList">
              <cell primary="content" :title="item.name" :value="getStatus(item.status)" @click.native="select(item)"></cell>
            </template>
           </group>
        </div>
      </popup>
    </div>

    <!--删选框-->
    <div v-transfer-dom>
      <popup v-model="showSideBox" position="right" @on-hide="hideFilter">
        <div style="width:200px;">
          <checklist title="请选择" :options="social" v-model="socialValue"></checklist>
        </div>
      </popup>
    </div>

  </div>
</template>
<style scoped>
  .filter-btn{
    position: absolute;
    top: 1.4rem;
    z-index: 2;
    right: 0.3rem;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background: #56a8e5;
    color: #fff;
    padding: 4px;
  }
  .filter-btn .icon{
    font-size: 20px;
  }
.map-detail-popup i{
  margin: 0 .2rem;
}
.map-detail-popup .lng-flex{
   margin: .2rem 0;
   color: #666666;
}
</style>
<script>
  import {TransferDom, Popup, Group, Cell,PopupPicker,Checklist} from 'vux'

  import util from '@/fetch/util';
  import car from '@/assets/img/amap/car.png';
  import warning from '@/assets/img/amap/warning.gif';
  import gas from '@/assets/img/amap/gas.png';
  import gasify from '@/assets/img/amap/gasify.png';
  import medical from '@/assets/img/amap/medical.png';
  import fire from '@/assets/img/amap/fire.png';
  import distribution from '@/assets/img/amap/dc.png';
  import Vue from 'vue'


  export default {
    data () {
      return {
        selectId:null,
        showPopupPicker:true,
        showDetailPopup: false,//详情弹窗
        showSearchList: false,//搜索列表弹窗
        showSideBox: false,//右侧图层弹窗
        detail:{},
        point:{},
        key:'',
        searchList:[],
        socialValue:['1','2','3','4','5','6','7','8','9','10','11','12'],

        gasType: [
          {
            value: 'gas',
            label: '加气站'
          },
          {
            value: 'gasify',
            label: '气化站'
          },
          {
            value: 'distribution',
            label: '配送站'
          },
          {
            value: 'fire',
            label: '消防力量'
          },
          {
            value: 'medical',
            label: '医疗力量'
          },
          {
            value: 'car',
            label: '槽车'
          }
        ],
        type: '',
        keyWords: '',
//      social: ['gas', 'gasify', 'distribution', 'fire','car', 'medical','busCar','bigCar','taxiCar','emergency','receive'],
        social: [
          {key: '1', value: '气化站'},
          {key: '2', value: '加气站'},
          {key: '3', value: '调配站'},
          {key: '4', value: '消防力量'},
          {key: '5', value: '医疗力量'},
          {key: '6', value: '紧急避难所'},
          {key: '7', value: '接收站'},
          {key: '8', value: '槽车'},
          {key: '9', value: '集车'},
          {key: '10', value: '公交车'},
          {key: '11', value: '出租车'},
        ],
        historyTrace: false,
        showGasStation: false,
        single: false,
        carNumber: '浙F363747',
        list: [
          {
            number: '922110',
          },
          {
            number: '2822110',
          },
          {
            number: '2272110',
          },
          {
            number: '2622110',
          }
        ],
        vertical: '',
        points: [],
        start: {},
        historyMap: {},
        map: {},
        carMarker: null,
        alarmMarker: null,
        warningGasStationMarker: null,
        gasStationMarker: null,
        overlays: [],
        mlnglat: [],
        styleOptions: {
          strokeColor: "red",
          fillColor: "red",
          strokeWeight: 3,
          strokeOpacity: 0.8,
          fillOpacity: 0.6,
          strokeStyle: 'solid'
        },
        longitude: 121.02085,
        latitude: 30.685719,
        //模拟坐标生产，循环产生标注添加到map marker
        //gasArr:[[121.010502,30.629552], [121.139283,30.750295], [120.921965,30.678762],],
        gasArr: [],
        medicalsArr: [[121.101027, 30.706273], [120.88141, 30.61631], [120.861863, 30.699815],],
        gasifyArr: [[120.835153, 30.694166], [120.798358, 30.733907], [120.868498, 30.72596],],
        carArr: [[120.898657, 30.668012], [121.110801, 30.610343], [121.025713, 30.615564],],
        distributionArr: [[121.036062, 30.641667], [121.074006, 30.676461], [120.957873, 30.628492],],
        fireArr: [[120.877385, 30.637939], [120.937464, 30.700808], [120.834267, 30.688635],],
        gasifyArr1: [],
        //加气站
        gasMsg: [],
        //气化站
        gasifyMsg: [],
        //配送站
        distributionMsg: [],
        gasName: [],
        gasifyName: [],
        distributionName: [],
        carName: [],
        medicalName: [],
        //所有的站点名称以及对于的坐标
        allStationNames: [],
        //当前选中类型后的对应的坐标
        currentStationNames: [],
        selectGasName: '',
        markerStationContent: {},
        markers: [],
        //改变站点类型移除指定的文字信息
        labelContent: [],
        //给地图中所有的坐标缩小后添加
        markerClusterer:'',
        allStation:[]
      }
    },
    directives: {
      TransferDom
    },
    components: {
      Popup,
      Group,
      PopupPicker,
      Cell,
      Checklist
    },
    created() {
      this.getGasInfo();
      //this.setWxConfig();
    },
    mounted() {

      let $this = this;
      $this.map = new BMap.Map("allmap", {enableMapClick: false});    // 创建Map实例,并关闭底图可点功能
      this.map.setCurrentCity("嘉兴");          // 设置地图显示的城市 此项是必须设置的
      $this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      //this.map.addControl(new BMap.NavigationControl());//左上角，添加默认缩放平移控件
      $this.map.enableKeyboard(true);//启动键盘操作
      // function myFun(result){
      //     var cityName = result.name;
      //     $this.map.setCenter(cityName);
      //     console.log("当前定位城市:"+cityName);
      // }
      // var myCity = new BMap.LocalCity();
      // myCity.get(myFun);
      //创建异常的图标
      let geolocation = new BMap.Geolocation();
//        开启SDK辅助定位
      geolocation.enableSDKLocation();
      geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          var mk = new BMap.Marker(r.point);
          console.log('您的位置：'+r.point.lng+','+r.point.lat);
          $this.point.lng = r.point.lng;
          $this.point.lat = r.point.lat;
          $this.map.centerAndZoom(new BMap.Point(r.point.lng, r.point.lat), 13);  // 初始化地图,设置中心点坐标和地图级别

        }
        else {
          alert('failed'+this.getStatus());
        }
      });

      //weixin


    },
    methods: {
      showFilter(){
        this.showSideBox = true;
      },
      hideFilter(){
        let $this = this;
        console.log(this.markerClusterer);
        $this.getAllTypeNumsInMap();
        this.markerClusterer = '';
        let allOverlay = $this.map.getOverlays();

        for (var i = 0; i < allOverlay.length; i++) {
          //删除指定经度的点
          $this.map.removeOverlay(allOverlay[i]);
          //console.log(i)
        }
        $this.markers = [];
        console.log($this.socialValue.length);
        if($this.socialValue.length){
          let socialLenght = $this.socialValue.length;
          $this.socialValue.forEach(function (e) {
            $this.controlMarkerIsShow(e);
          })
        }


      },
      //控制图层的隐藏与显示根据数组index值判断
      controlMarkerIsShow(type) {
        let $this = this;
          switch (parseInt(type)){
            case 1:
              $this.gasifyStations();

              break;
            case 2:
              $this.gasStations();

              break;
            case 3:
              $this.distributionStations();

              break;
            case 4:
              $this.fireControls();

              break;
            case 5:
              $this.medicals();

              break;
            case 6:
              $this.tankCars();

              break;
            case 7:
              //$this.busCars();
              break;
            case 8:
              //$this.bigCars();

              break;
            case 9:
              //$this.taxiCars();

              break;
            case 10:
              //$this.emergency();

              break;
            case 11:
             // $this.receive();
              break;
          }
        setTimeout(function () {
          $this.getAllTypeNumsInMap(true);
        },2);

      },
      select(item){
        let $this = this;
        $this.detail = item;
        $this.showSearchList = false;
        $this.showDetailPopup = true;
        $this.map.centerAndZoom(new BMap.Point(item.longitude, item.latitude), 13);  // 初始化地图,设置中心点坐标和地图级别

      },
      init(){
          let $this = this;
          //加气站坐标循环生成；
          this.gasStations();
          //医院坐标循环生成；
          this.medicals();
          //气化站坐标循环生成；
          this.gasifyStations();
          //槽车坐标循环生成；
          this.tankCars();
          //配送站坐标循环内容生成
          this.distributionStations();
          //消防坐标循环内容生成
          this.fireControls();

          this.getAllStationName();

          setTimeout(function () {
            $this.getAllTypeNumsInMap();
            this.markers = [];
          },1000);


        },
      search(){
          let $this = this;
          $this.searchList = $this.allStation.filter(function (e) {
            return e.name.indexOf($this.key) > -1;
          });

          $this.showSearchList = true;
      },
      goMap(detail){
         let $this = this;
        location.href = `http://api.map.baidu.com/direction?origin=latlng:${$this.point.lat},${$this.point.lng}|name:我的位置&destination=latlng:${$this.detail.latitude},${$this.detail.longitude}|name:${$this.detail.name}&mode=driving&region=嘉兴&output=html`;

      },
      hideDetailPopup(){
        let $this = this;
        $this.showDetailPopup = false;
      },
      setWxConfig(){
        let $this = this;

        util.fetchGet(util.path.wxJssdk, {}).then((data) => {
          //控制加载条

          if (data) {

            data.jsApiList = ['openLocation']; // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            //data.debug=true; // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  = ['openLocation']; // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            data.url=location.href.split('#')[0]; // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  = ['openLocation']; // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            console.log(JSON.stringify(data));

            wx.config(data);



          }

        }).catch(err => {
          this.$vux.toast.text(err.message)
        })
      },
      setMap() {
        this.historyMap = new BMap.Map("historyMap", {enableMapClick: false});
        this.historyMap.centerAndZoom(new BMap.Point(120.757278, 30.758204), 15);  // 初始化地图,设置中心点坐标和地图级别
        this.historyMap.setCurrentCity("嘉兴");          // 设置地图显示的城市 此项是必须设置的
        this.historyMap.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        this.historyMap.addControl(new BMap.NavigationControl());//左上角，添加默认缩放平移控件
        this.historyMap.enableKeyboard(true);//启动键盘操作
      },
      //创建异常的图标
      getStatus(num){
        switch(parseInt(num)){
          case 1: {
            return "正在运营"
          }
          case 2: {
            return "停运"
          }
          case 3: {
            return "维修"
          }
          case 4: {
            return "关闭"
          }
        }
      },
      //默认初始得到公司名称
      getAllStationName() {
        this.allStationNames = [...this.gasName, ...this.gasifyName, ...this.distributionName, ...this.carName, ...this.medicalName,];
        this.currentStationNames = this.allStationNames;
        this.allStation = [...this.gasMsg,...this.distributionMsg,...this.gasifyMsg];
      },
      //聚合
      getAllTypeNumsInMap(){
        //创建地图放大缩小显示的位置标志
        this.markerClusterer = new BMapLib.MarkerClusterer(this.map, {markers: this.markers});
        // console.log(this.markerClusterer);
        // console.log(this.markers);
      },
      //根据坐标创建相对应的加气站循环地图坐标生成
      gasStations(type) {
        let that = this;
        this.gasArr = [];
        let gasArrInfo = [];
        this.gasName = [];
        gasArrInfo = this.gasMsg;
        var gasStationIcon = new BMap.Icon(gas, new BMap.Size(54, 75));
        let $this = this;
        if (gasArrInfo.length) {
          for (let i in gasArrInfo) {
            //站点相关信息
            let parmas = {};
            parmas.name = gasArrInfo[i].name;
            parmas.address = gasArrInfo[i].address;
            parmas.stationCompany = gasArrInfo[i].upmsLngcompanyExtend ? gasArrInfo[i].upmsLngcompanyExtend.name : '';
            parmas.stationResponsiblePeople = gasArrInfo[i].upmsUser ? gasArrInfo[i].upmsUser.realname : '';
            parmas.capacity = gasArrInfo[i].capacity ? gasArrInfo[i].capacity : '';
            parmas.stationState = gasArrInfo[i].status ?that.getStatus(gasArrInfo[i].status)  : "";
            parmas.phone = gasArrInfo[i].upmsUser ? gasArrInfo[i].upmsUser.phone : "";
            parmas.id = gasArrInfo[i].id ? gasArrInfo[i].id : "";
            parmas.createTime = gasArrInfo[i].createTime ? util.getFormatDate(gasArrInfo[i].createTime): "";
            parmas.introduction = gasArrInfo[i].introduction ? gasArrInfo[i].introduction: "";
            parmas.longitude = gasArrInfo[i].longitude ? gasArrInfo[i].longitude: "";
            parmas.latitude = gasArrInfo[i].latitude ? gasArrInfo[i].latitude: "";
            //实时数据
            parmas.realData = gasArrInfo[i].realTimeData ? gasArrInfo[i].realTimeData : [];
            let gasNameInfo = {};
            gasNameInfo.value = 'gas';
            gasNameInfo.label = gasArrInfo[i].name;
            gasNameInfo.mapAddress = {
              longitude: gasArrInfo[i].longitude,
              latitude: gasArrInfo[i].latitude
            }
            this.gasName.push(gasNameInfo);
            var Array = [];
            Array[0] = gasArrInfo[i].longitude;
            Array[1] = gasArrInfo[i].latitude;
            this.gasArr.push(Array);
            var alarmIcon = new BMap.Icon(warning, new BMap.Size(54, 75));
            var centerPoint = new BMap.Point(Array[0], Array[1]);
            $this.alarmMarker = new BMap.Marker(new BMap.Point(Array[0], Array[1]), {icon: alarmIcon}); // 创建标注
            $this.warningGasStationMarker1 = new BMap.Marker(new BMap.Point(Array[0], Array[1]), {icon: gasStationIcon}); // 创建标注
            that.markers.push($this.warningGasStationMarker1);


            let myInfo = (() => {
              //this.map.addOverlay($this.alarmMarker); // 将标注添加到地图中
              this.map.addOverlay($this.warningGasStationMarker1);  //在地图中添加marker

              //addClickHandler(searchInfoWindow2);
              this.warningGasStationMarker1.addEventListener("click", function (e) {
                console.log(JSON.stringify(parmas));
                $this.detail = parmas;
                $this.showDetailPopup = true;
//                location.href='http://api.map.baidu.com/marker?location=40.047669,116.313082&title=我的位置&content=百度奎科大厦&output=html&src=yourComponyName|yourAppName';
              })
            });
            myInfo();

          }
        }


      },
      //医院坐标循环生成
      medicals(type) {
        let that = this;
        let arr = [[121.101027, 30.706273], [120.88141, 30.61631], [120.861863, 30.699815],];
        let medicalsArr = this.medicalsArr;
        let $this = this;
        if (medicalsArr.length) {
          for (let i in medicalsArr) {
            var Array = medicalsArr[i];
            var medicalIcon = new BMap.Icon(medical, new BMap.Size(54, 75));
            this.medicalMarker = new BMap.Marker(new BMap.Point(Array[0], Array[1]), {icon: medicalIcon}); // 创建标注
            that.markers.push(this.medicalMarker);
            let $this = this;

            this.map.addOverlay($this.medicalMarker);  //在地图中添加医院marker
            //new BMapLib.MarkerClusterer(this.map, {markers:this.medicalMarker});
            //addClickHandler(searchInfoWindow2);
            this.medicalMarker.addEventListener("click", function (e) {

            })
          }
        }
      },
      //根据坐标创建相对应的气化站循环地图坐标生成
      gasifyStations(type) {
        let that = this;
        let $this = this;
        this.gasifyName = [];
        let gasifyArrInfo = [];
        //气站信息内容
        gasifyArrInfo = this.gasifyMsg;
        var gasifyStationIcon = new BMap.Icon(gasify, new BMap.Size(54, 75));
        if (gasifyArrInfo.length) {
          for (let i in gasifyArrInfo) {
            //站点相关信息
            let parmas = {};
            parmas.name = gasifyArrInfo[i].name;
            parmas.address = gasifyArrInfo[i].address;
            parmas.stationCompany = gasifyArrInfo[i].upmsLngcompanyExtend ? gasifyArrInfo[i].upmsLngcompanyExtend.name : '';
            parmas.stationResponsiblePeople = gasifyArrInfo[i].upmsUser ? gasifyArrInfo[i].upmsUser.realname : '';
            parmas.capacity = gasifyArrInfo[i].capacity ? gasifyArrInfo[i].capacity : '';
            parmas.stationState = gasifyArrInfo[i].status ?that.getStatus(gasifyArrInfo[i].status)  : "";
            parmas.phone = gasifyArrInfo[i].upmsUser ? gasifyArrInfo[i].upmsUser.phone : "";
            parmas.id = gasifyArrInfo[i].id ? gasifyArrInfo[i].id : "";
            parmas.realData = gasifyArrInfo[i].realTimeData ? gasifyArrInfo[i].realTimeData : [];
            parmas.createTime = gasifyArrInfo[i].createTime ? util.getFormatDate(gasifyArrInfo[i].createTime): "";
            parmas.introduction = gasifyArrInfo[i].introduction ? gasifyArrInfo[i].introduction: "";
            parmas.longitude = gasifyArrInfo[i].longitude ? gasifyArrInfo[i].longitude: "";
            parmas.latitude = gasifyArrInfo[i].latitude ? gasifyArrInfo[i].latitude: "";
            //parmas.realData = [];
            let gasifyNameInfo = {};
            gasifyNameInfo.value = 'gasify';
            gasifyNameInfo.label = gasifyArrInfo[i].name;
            gasifyNameInfo.mapAddress = {
              longitude: gasifyArrInfo[i].longitude,
              latitude: gasifyArrInfo[i].latitude
            }
            this.gasifyName.push(gasifyNameInfo);
            var Array = [];
            Array[0] = gasifyArrInfo[i].longitude;
            Array[1] = gasifyArrInfo[i].latitude;
            this.gasifyArr.push(Array);
            var centerPoint = new BMap.Point(Array[0], Array[1]);
            this.gasifyMarker = new BMap.Marker(new BMap.Point(Array[0], Array[1]), {icon: gasifyStationIcon}); // 创建标注
            that.markers.push(this.gasifyMarker);
            let myInfo = (() => {

              this.map.addOverlay($this.gasifyMarker); // 将标注添加到地图中
              this.gasifyMarker.addEventListener("click", function (e) {
                $this.detail = parmas;
                $this.showDetailPopup = true;

              })
            });
            myInfo();
          }
        }
      },
      //根据公交车坐标信息生成相应的地图坐标
      busCars(type) {
        let carArr = this.busCarArr;
        let that = this;
        let $this = this;
        if (carArr.length) {
          for (let i in carArr) {
            var Array = carArr[i];
            var carIcon = new BMap.Icon(busCar, new BMap.Size(50, 62));
            var centerPoint = new BMap.Point(Array[0], Array[1]);
            this.carMarker = new BMap.Marker(new BMap.Point(Array[0], Array[1]), {icon: carIcon}); // 创建标注
            //that.markers.push(this.carMarker);
            //this.carMarker.setRotation(30);//设置点的旋转角度
            let $this = this;
            let stationContent = `<div id="stationDetail">
                                            <div style="line-height:20px; height:20px; margin-left:10px; ">车牌号：{{this.tankCar.LicensePlateNumber}}</div>
                                            <div style="line-height:20px; height:20px; margin-left:10px; ">嘉兴公交 ：{{this.tankCar.num}}</div>
                                            <div style="line-height:20px; height:20px; margin-left:10px; ">车颜色：{{this.tankCar.carColor}}</div>
                                            <div style="line-height:20px; height:20px; margin-left:10px; ">公交速度：{{this.tankCar.carSpeed}}</div>
                                            <div style="line-height:20px; height:20px; margin-left:10px; ">公交状态：{{this.tankCar.carState}}</div>
                                            <div style=" margin-left:10px; " class="ivu-btn ivu-btn-info" >查看更多</div>

                                    </div>`;

            var carTmp = Vue.extend({
              template: stationContent,
              data() {
                return {
                  tankCar: {
                    LicensePlateNumber: '浙F0081T',
                    num: '1路',
                    carColor: '白色',//容量
                    carStation: '嘉兴市配送站',//简介
                    carSpeed: "50.7km/h",
                    //carCapacity: '37.0 m³',//压力
                    carState: '运营状态',//压力
                  },
                }
              },
              mounted() {
                //this.station.state = 1;
              },
              methods: {
                alarmDetail() {
                  $this.$router.push({path: `/home`});
                },
                isNormal() {

                }
              }
            })
            var carComponent = new carTmp().$mount();

            //创建检索信息窗口对象
            var searchInfoWindow2 = null;
            searchInfoWindow2 = new BMapLib.SearchInfoWindow(this.map, carComponent.$el, {
              title: "公交信息", //标题
              width: 100, //宽度
              //height: 300, //高度
              panel: "panel", //检索结果面板
              enableAutoPan: true, //自动平移
              enableSendToPhone: false,//去除手机图标
              searchTypes: []
            });
            this.map.addOverlay($this.carMarker); // 将槽车标注添加到地图中

            //addClickHandler(searchInfoWindow2);
            this.carMarker.addEventListener("click", function (e) {
              var p = e.target;
              var point = new BMap.Point(p.JA.lng, p.JA.lat);
              searchInfoWindow2.open(point);

            })
            if(type){
              //that.markers = [...that.recordsMarkers];
              that.markers.forEach(function (e,index) {
                if(e.point.lng==$this.carMarker.point.lng){
                  that.markers.splice(index,1);
                }
              })
              //that.recordsMarkers = [...that.markers];
            }else{
              that.markers.push($this.carMarker);
            }
          }
        }
      },
      //根据槽车坐标信息生成相应的地图坐标
      tankCars() {
        let arr = [[120.898657, 30.668012], [121.110801, 30.610343], [121.025713, 30.615564],];
        let carArr = this.carArr;
        let that = this;
        let $this = this;
        if (carArr.length) {
          for (let i in carArr) {
            var Array = carArr[i];
            var carIcon = new BMap.Icon(car, new BMap.Size(54, 75));
            var centerPoint = new BMap.Point(Array[0], Array[1]);
            this.carMarker = new BMap.Marker(new BMap.Point(Array[0], Array[1]), {icon: carIcon}); // 创建标注
            that.markers.push(this.carMarker);
            //this.carMarker.setRotation(30);//设置点的旋转角度

            this.map.addOverlay($this.carMarker); // 将槽车标注添加到地图中

            //addClickHandler(searchInfoWindow2);
            this.carMarker.addEventListener("click", function (e) {


            })
          }
        }
      },
      //根据配送站坐标信息生成相应的地图坐标
      distributionStations(type) {
        let that = this;
        let $this = this;
        this.distributionName = [];
        this.distributionArr = [];
        let distributionArrInfo = [];
        distributionArrInfo = this.distributionMsg;
        var distributionIcon = new BMap.Icon(distribution, new BMap.Size(54, 75));
        if (distributionArrInfo.length) {
          for (let i in distributionArrInfo) {
            let parmas = {};
            parmas.name = distributionArrInfo[i].name;
            parmas.address = distributionArrInfo[i].address;
            parmas.stationCompany = distributionArrInfo[i].upmsLngcompanyExtend ? distributionArrInfo[i].upmsLngcompanyExtend.name : '';
            parmas.stationResponsiblePeople = distributionArrInfo[i].upmsUser ? distributionArrInfo[i].upmsUser.realname : '';
            parmas.capacity = distributionArrInfo[i].capacity ? distributionArrInfo[i].capacity : '';
            parmas.stationState = distributionArrInfo[i].status ? that.getStatus(distributionArrInfo[i].status) : "";
            parmas.phone = distributionArrInfo[i].upmsUser ? distributionArrInfo[i].upmsUser.phone : "";
            parmas.id = distributionArrInfo[i].id ? distributionArrInfo[i].id : "";
            parmas.createTime = distributionArrInfo[i].createTime ? util.getFormatDate(distributionArrInfo[i].createTime): "";
            parmas.introduction = distributionArrInfo[i].introduction ? distributionArrInfo[i].introduction: "";
            parmas.longitude = distributionArrInfo[i].longitude ? distributionArrInfo[i].longitude: "";
            parmas.latitude = distributionArrInfo[i].latitude ? distributionArrInfo[i].latitude: "";
            //实时数据
            parmas.realData = distributionArrInfo[i].realTimeData ? distributionArrInfo[i].realTimeData : [];
            let distributionNameInfo = {};
            distributionNameInfo.value = 'distribution';
            distributionNameInfo.label = distributionArrInfo[i].name;
            distributionNameInfo.mapAddress = {
              longitude: distributionArrInfo[i].longitude,
              latitude: distributionArrInfo[i].latitude
            }
            this.distributionName.push(distributionNameInfo);
            var Array = [];
            Array[0] = distributionArrInfo[i].longitude;
            Array[1] = distributionArrInfo[i].latitude;

            this.distributionArr.push(Array);
            this.distributionMarker = new BMap.Marker(new BMap.Point(Array[0], Array[1]), {icon: distributionIcon}); // 创建标注
            that.markers.push(this.distributionMarker);

            //that.markers.push(this.distributionMarker);
            let myInfo = (() => {
              this.map.addOverlay(this.distributionMarker);  //在地图中添加marker
              //addClickHandler(searchInfoWindow2);
              this.distributionMarker.addEventListener("click", function (e) {
                $this.detail = parmas;
                $this.showDetailPopup = true;

              })
            });
            myInfo();

          }
        }
      },
      //根据消防坐标信息生成相应的地图坐标
      fireControls() {
        let fireArr = this.fireArr;
        let $this = this;
        if (fireArr.length) {
          for (let i in fireArr) {
            var Array = fireArr[i];
            var fireIcon = new BMap.Icon(fire, new BMap.Size(54, 75));
            $this.fireControlsMarker = new BMap.Marker(new BMap.Point(Array[0], Array[1]), {icon: fireIcon}); // 创建标注
            $this.markers.push(this.fireControlsMarker);

            $this.map.addOverlay($this.fireControlsMarker); // 将槽车标注添加到地图中
            $this.fireControlsMarker.addEventListener("click", function (e) {

            })
          }
        }
      },
      //接口获取数据进而进行数据显示
      getGasInfo(type) {
        let params = {};
        util.fetchGet(util.path.getMapInfo, params).then((data) => {
          if (data.code == 1) {
            this.gasMsg = data.data.fillStation;
            this.distributionMsg = data.data.sendStation;
            this.gasifyMsg = data.data.gasifyStation;

            this.init();

          }
        }).catch(err => {
          this.$vux.toast.text(err.message)
        })
      }

    }


  }

  wx.ready(function(){
    wx.checkJsApi({
      jsApiList: ['chooseImage','openLocation'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
      success: function(res) {
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
      }
    });

    wx.openLocation({
      latitude: 30, // 纬度，浮点数，范围为90 ~ -90
      longitude: 120, // 经度，浮点数，范围为180 ~ -180。
      name: '22', // 位置名
      address: '', // 地址详情说明
      scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
      infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
    });
  });

</script>
<style scoped>
  #allmap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
  }

  .map-search-bar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 96%;
    margin: .2rem;
    background: #fff;
    height: 1rem;
  }

  .map-search-bar input {
    height: 100%;
    margin: 0;
    border: none;
    width: 100%;
    text-indent: .4rem;
  }

  .map-search-bar .icon {
    position: absolute;
    color: #4791d2;
    top: 0;
    right: 0;
    width: 1.2rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
  }
  .map-detail-popup{
    position: relative;
  }
  .map-detail-popup .icon-del{
    position: absolute;
    right: 0;
    font-size: 20px;
  }

  .blue-button{
    display: inline-block;
    padding: 3px 16px;
    border-radius: 4px;
  }

</style>
<style>
  .map-detail-popup .weui-cells {
    margin: 0;
    padding: .2rem;
  }
</style>
